<template>
  <div class="ConsultingTrends" id="Communicate"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { getInquiry } from "@/api/home.js";

export default {
  name: "Communicate ",
  props: {},
  data() {
    return {
      // 获取-通话统计数据-参数
      inquiryParams: {
        type: "1",
        start: "2",
      },
      // 图表数据
      datasAll: [],
      datas: [],
      data: [],
    };
  },

  watch: {
    phoneType(val, oldVal) {
      // console.log(1111, val, oldVal); //val：是新值 oldVal：是旧值
      this.inquiryParams.type = val;
      this.getInquiry();
    },
  },

  props: ["phoneType"],
  created() {},
  mounted() {
    this.inquiryParams.type = this.phoneType;
    // 咨询统计
    this.getInquiry();
  },
  methods: {
    // 咨询统计
    getInquiry() {
      getInquiry(this.inquiryParams).then((res) => {
        if (res.code == 200) {
          this.datasAll = res.data.logVos;
          this.$emit("phoneNum", res.data.sum);
          if (this.datasAll.length == 0) {
            this.datas = [0];
            this.data = ["2023-07-21"];
          } else {
            this.datas = [];
            this.data = [];
            this.datasAll.forEach((item, index) => {
              this.data.push(item.times);
              this.datas.push(item.sum);
              // this.datas = this.getweekday(item.times, item.sum);
            });
          }

          // 咨询趋势数据
          this.getTrendcurveGateway();
        }
      });
    },

    getweekday(date, sum) {
      var weekArray = new Array("0", "1", "2", "3", "4", "5", "6");
      var weekArray2 = new Array(
        "sun",
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat"
      );

      var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
      var week2 = weekArray2[new Date(date).getDay()]; //注意此处必须是先new一个Date
      this.datas[week] = sum;
      return this.datas;
    },

    // 通话趋势图表
    getTrendcurveGateway(data) {
      const datas = JSON.parse(JSON.stringify(this.datas));
      const dataDate = JSON.parse(JSON.stringify(this.data));
      const myChart = this.$echarts.init(
        document.getElementById("Communicate")
      );
      myChart.setOption({
        // 悬浮提示
        tooltip: {
          show: true,
          trigger: "axis",
          padding: 0,
          borderWidth: 1,
          borderColor: "#005583",
          backgroundColor: "rgba(255,255,255,0.4)",
          textStyle: {
            color: "#009FCE",
            fontSize: 12,
          },

          extraCssText: "box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);",
          //提示框内容格式器
          formatter: (e) => {
            let data = e[0];
            //字符串模板
            let context = `
               <div style="background: radial-gradient(circle, #00152E, #003455); padding: 8px;">
                   <p><span>时间：</span><span>${data.axisValue}</span></p>
                   <p><span>咨询数量: </span><span>${data.data}</span></p>
               </div>
            `;
            return context;
          },
        },
        // 位置
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          //   boundaryGap: false,
          data: dataDate,
          // data: data.categories,
          //修改横轴刻度文字颜色
          axisLabel: {
            color: "rgba(0, 129, 172, 1)",
            fontsize: 12,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            minInterval: 1,
            type: "value",
            name: "", // data.series[0].unit, //y轴顶部名字
            // 修改y轴的字体颜色
            axisLabel: {
              color: "rgba(0, 129, 172, 1)",
              fontsize: 12,
            },
            //修改y轴线条样式
            axisLine: {
              LineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            // axisLabel: {
            //   // 保留一位小数
            //   formatter: function (value) {
            //     return value.toFixed(1);
            //   },
            // },
          },
        ],
        series: [
          {
            smooth:true,
            name: "", //data.series[0].name,  //tps
            // data: [0, 0, 0, 4, 0, 0, 0, 0], // data.series[0].data,
            data: datas, // data.series[0].data,
            type: "line",
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#00dbfc",
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },

            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,219,252)",
                },
                {
                  offset: 1,
                  color: "rgba(0,219,252,0)",
                },
              ]),
            },
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// 通话趋势图表
#Communicate {
  height: 13.5rem;
  padding: 0 0.8125rem 0 1.0625rem;
}
</style>
